<template>
  <div>
    <div style="margin-top: 15px">
      <span>开始日期：</span>
      <input type="date" class="i_time" />
      <span style="margin-left: 10px">开始时间：</span>
      <input type="time" class="i_time" />
      <span style="margin-left: 10px"> 结束日期：</span>
      <input type="date" class="i_time" />
      <span style="margin-left: 10px">结束时间：</span>
      <input type="time" class="i_time" />
    </div>
    <div  class="spjz_flex">
      <div id="main" :style="{ width: '1000px', height: '500px'}" style="margin-top: 200px"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echart",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  comments: {
    echarts,
  },
  methods:{
    show(){

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle:{
            color:"white"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["A区", "B区", "C区", "D区", "E区", "F区", "G区"],
            axisLabel: {
              show: true,
              textStyle:{
                color:"white"
              }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle:{
                color:"white"
              }
            }
          }
          ,
        ],
        series: [
          {
            name: "正常用电",
            type: "bar",
            stack: "Ad",
            color: "#0CCF67",
            emphasis: {
              focus: "series",
            },
            data: [400, 200, 300, 200, 200, 200, 200],
          },
          {
            name: "节约用电",
            type: "bar",
            stack: "Ad",
            color: "#AED46E",
            emphasis: {
              focus: "series",
            },
            data: [50, 30, 20, 30, 20, 30, 60],
          },
        ],
      };
      option && myChart.setOption(option);
    }
  },
  mounted(){
    this.show();
  }
}
</script>

<style>

</style>
